<template>
	<view class="topup">
		<view class="choice">
			<view class="je">
				<view>账户余额</view>
				<view><span>{{balance != 0?balance:0}}</span>元</view>
			</view>
			<view class="czje">
				<view v-for="(item,index) in choiceList" :key="index" :class="{ active: czjeId === item.id }" @click="choice(item)">{{item.price}}元</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pays">
			<view class="titles">支付方式</view>
			<view class="zffs">
				<view class="mode" style="-webkit-flex: 1;flex: 1;">
					<view @click="pay(0)">
						<image style="width: 63px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/wxzf.png" />
					</view>
					<!-- <view @click="pay(1)">
						<image style="width: 67px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/zfbzf.png" />
					</view >
					<view @click="pay(2)">
						<image style="width: 82px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ylzf.png" />
					</view> -->
				</view>
				<uni-data-checkbox  style="width: 20px;" selectedColor="#1E9B5E" v-model="radio" :localdata="sex"></uni-data-checkbox>
			</view>
		</view>
		<view class="explain">
			<view class="titles">
				充值说明
			</view>
				<view class="lis">1、充值金额有效期：自充值日起至用完为止；</view>
				<view class="lis">2、使用方法：此充值在买菜商城消费视同于现金结算，在结算时选择“充值卡支付”即可使用；</view>
				<view class="lis">3、在线充值成功后，不支持提现，除非法律另有规定；</view>
			</view>
		
		<view class="buts">
			<view class="quit" @click="$noMultipleClicks(rob)">
				确认充值
			</view>
		</view>
	</view>
</template>

<script>
	import { czkqueryAllTwo,czplaceOrder,wxPayRecharge,xcxWxPayRecharge } from '@/utils/api.js';
	export default {
		data() {
			return {
				noClick:true,
				// 用户id
				id:0,
				// 余额
				balance:0,
				// 选择充值金额id
				czjeId:0,
				// 选择充值金额数据
				choiceList:[],
				// 选择的充值金额
				czje:0,
				// 支付方式
				radio:0,
				sex: [{
					value: 0
				}
				// , {
				// 	value: 1
				// }, {
				// 	value: 2
				// },
				],
				
				buls:true,
				
				orderInfo:{},
			}
		},
		onLoad(e) {
			this.id=e.id
			this.balance=e.balance
			this.getCzk()
		},
		methods: {
			// 获取充值卡
			getCzk(){
				czkqueryAllTwo({}).then((res) => {
					if (res.code === 200) {
						// console.log(res);
						this.choiceList=res.data
						this.czjeId=res.data[0].id
					} else {
						uni.showToast({title:"请求错误", position: 'bottom'})
					}
				}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 选择充值金额
			choice(item){
				this.czjeId=item.id
				this.czje=item.price
			},
			// 支付方式
			pay(val){
				this.radio=val
				this.buls=true
				if(val == 1 || val == 2){
					uni.showToast({title:"暂未开通", position: 'bottom'})
					this.buls=false
				}
			},
			// 确认充值
			rob(){
				let _this=this
				if(this.buls){
					uni.showModal({
						content: "您确定要充值当前金额吗？",
						confirmText: "确定",
						cancelText: "取消",
						success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.showLoading({
									mask:true
								})
								// 获取车辆信息数据
								czplaceOrder({
									rechargeId:_this.czjeId
								}).then((res) => {
								    if (res.code === 200) {
								      // console.log(res);
									  _this.orderInfo=res.data
									  uni.showToast({title:res.message, position: 'bottom'})
									  if(_this.radio == 0){
									  	// console.log('微信');
									  	// #ifdef MP-WEIXIN
									  	_this.wxPayRecharge(_this.orderInfo)
									  	// #endif
									  }
								    } else {
								      uni.showToast({title:"请求错误", position: 'bottom'})
								    }
								}).catch((err) => {
									uni.showToast({title:'网络繁忙', position: 'bottom'})
								});
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				}else{
					uni.showToast({title:'暂不支持当前支付方式！', position: 'bottom'})
				}
			},
			// 微信支付
			wxPayRecharge(orderInfo){
				// console.log(orderInfo);
				// 微信支付
				xcxWxPayRecharge({
					orderNumber:this.orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res.data);
						this.requestPayment(res.data,"wxpay")
				    } else {
				      uni.showToast({title:res.message, position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 支付
			requestPayment(e,zflx) {
			    let orderInfo = e;
			    // console.log("得到订单信息", orderInfo,zflx);
			    // uni.requestPayment({
			    //     provider: zflx,
			    //     orderInfo: orderInfo,
			    //     success: (e) => {
			    //         // console.log("success", e);
			    //         uni.showToast({
			    //             title: "支付成功!"
			    //         })
			    //     },
			    //     fail: (e) => {
			    //         console.log("fail", e);
			    //         uni.showModal({
			    //             content: "支付失败",
			    //             showCancel: false
			    //         })
			    //     },
			    //     complete: () => {
			    //         setTimeout(() => {
			    //         	uni.hideLoading()
			    //         	// uni.navigateBack({delta: 1})
			    //         }, 1000);
			    //     }
			    // })
				
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: orderInfo.timeStamp,
				    nonceStr: orderInfo.nonceStr,
				    package: orderInfo.package,
				    signType: 'MD5',
				    paySign: orderInfo.paySign,
					success: function (res) {
						// console.log(res);
						uni.showToast({
						    title: "支付成功!"
						})
					},
					fail: function (err) {
						// console.log(err);
						uni.showModal({
						    content: "支付失败",
						    showCancel: false
						})
					},
				    complete: () => {
				        setTimeout(() => {
				        	uni.hideLoading()
				        	uni.navigateBack({delta: 1})
				        }, 1000);
				    }
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.topup{
		padding: 20px 10px 10px 10px;
		.choice{
			height: 270px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 15px;
			.je{
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				view:nth-child(1){
					font-size: 20px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 28px;
				}
				view:nth-child(2){
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: $mainText;
					line-height: 33px;
					span{
						font-size: 24px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1C9A5D;
						line-height: 33px;
					}
				}
			}
			.czje{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				margin-top: 25px;
				view{
					width: 32%;
					height: 80px;
					background: #F5F5F5;
					border-radius: 20px;
					margin-bottom: 10px;
					font-size: 20px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 80px;
					text-align: center;
				}
				.active{
					background: #209C5E;
					color: #FFFFFF;
				}
			}
		}
		.pays{
			padding: 0 10px 10px 10px;
			margin-top: 10px;
			background: #FFFFFF;
			border-radius: 10px;
			.titles{
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 50px;
			}
			.zffs{
				height: 50px;
				display: flex;
				justify-content: space-between;
				.mode{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					view{
						display: flex;
						align-items: center;
						image{
							margin-right: 10px;
						}
					}
				}
				::v-deep .uni-data-checklist{
					flex: 0;
					height: 100%;
					.checklist-group{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.checklist-box{
							margin: 0;
						}
					}
				}
			}
		}
		.explain{
			margin-top: 10px;
			padding: 0 10px;
			margin-bottom: 200rpx;
			.titles{
				font-size: 15px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #999999;
				line-height: 18px;
				margin-bottom: 10px;
			}
			.lis{
				font-size: 13px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 22px;
			}
		}
		
		.buts{
			width: 100%;
			position: fixed;
			bottom: 60rpx;
			left: 0%;
			view{
				height: 56px;
				margin: 0 40rpx !important;
				background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
				box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
				border-radius: 28px;
				font-size: 20px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				line-height: 50px;
				margin: 10px 0;
				text-align: center;
				color: #fff;
			}
		}
	}
</style>
